<template>
    <div  @click="playAudio">
        <div class="item-left">
            <div class="idx">
                <span>{{ songData.songIdx+1 }}</span>
            </div>
            <!-- <div class="geImg">
                <img :src="songData.picUrl" alt="">
            </div> -->
            <div class="item-text">
                <div>
                    <p><span>{{ songData.songName }}</span> <span>{{ songData.alias}}</span></p>
                    <p><span>{{ songData.ar }}</span> - <span>{{ songData.al }}</span></p>
                </div>
            </div>
        </div>
        <div class="item-right">
            <div>
                <!-- <i class="iconfont" @click="changeState" :class="this.playerState == 'playing'&&playIndex == songData.songIdx? 'icon-zanting':'icon-start'" ></i> -->
				<i class="iconfont" @click="changeState" :class="showIdx" ></i>
			</div>
        </div>  
    </div>
</template>

<script>
import api from "../js/api.js"
    export default {
        data() {
            return {
                offBtn:false
            }
        },
        props:["songData","playList","songIndex"],
        mounted() {
        },
        methods: {
            playAudio(){
				// 拼接url
                let audioUrl = "https://music.163.com/song/media/outer/url?id="+this.songData.id+".mp3";
                window.console.log("https://music.163.com/song/media/outer/url?id="+this.songData.id+".mp3")
				// 将url设置到audio身上
                this.audio.playAudio(audioUrl)
				// window.console.log(this.audio.vm)
				// 将当前歌曲详情提交到vuex中
				window.console.log(api.songDetail+`?ids=${this.songData.id}`)
				this.axios({
					url:api.songDetail+`?ids=${this.songData.id}`
				}).then(res=>{
					window.console.log(res.data.songs[0]);
					this.$store.commit("setMp3data",res.data.songs[0])
                    this.$store.commit("setUrldata",res.data.songs[0].al.picUrl)
                    window.console.log(res.data.songs[0].id);
                    // window.console.log()
                    // 获取歌词
                    return this.axios({url:api.lyric+res.data.songs[0].id})
				}).then(res=>{
                    // window.console.log(res.data.lrc.lyric)
                    // this.$store.commit("setMp3Lrc",res.data.lrc.lyric);
                    //将文本分隔成一行一行，存入数组
                    var lines = res.data.lrc.lyric.split('\n');
                    // window.console.log(lines)
                    var newLines = [];
                    lines.forEach((item)=> {
                        // window.console.log(item);
                        // substring: 截取字符串
                        var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));
                        var c = item.substring(item.indexOf("]") + 1, item.length);
                        newLines.push({
                            t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),
                            c: item.substring(item.indexOf("]") + 1, item.length)
                        });
                        window.console.log(t,c);
                    });
                    // window.console.log(newLines[0].c)
                    var lrcList = [];
                    newLines.forEach((it)=>{
                        // window.console.log(it)
                        lrcList.push({
                            its:it.c
                        })

                    })
                    window.console.log(lrcList)
                    this.$store.commit("setMp3Lrc",lrcList);
                })
				// 将当前专辑所有的歌曲存入vuex,播放列表
				this.$store.commit("setPlaySongList",this.playList);
				//将当前播放音频下标存入vuex,
				this.$store.commit("setPlayId",this.songIndex);
            },
			changeState(){
				// 禁止父元素的冒泡事件
				event.stopPropagation();
				// 如果是正在播放的歌曲,则切换按钮状态，反之播放新的歌曲
				if(this.playIndex == this.songData.songIdx){
					if(this.playerState == "playing"){ 
						this.audio.pause();
					}else{
						this.audio.play();
					}
				}else{
					this.playAudio();
				}
			},
        },
        computed: {
			showIdx(){
				if(this.playIndex == this.songData.songIdx && this.playerState == "playing"){
					return 'icon-zanting'
				}else{
					return 'icon-start'
				}
			},
            playIndex(){
                return this.$store.state.playIndex 
            },
            playerState(){
                return this.$store.state.playerData;
            },
        },
    }
</script>

<style lang="scss" scoped>
.song-item{
    // 歌单歌曲列表
    width: 100%;
    padding: 0 6px 6px;
    // background-color: rgba($color: rgb(5, 5, 5), $alpha: 0.6);
    color: black;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
	border-bottom: 1px solid lightcoral;
    .item-left{
        width: 90%;
        text-align: initial;
        display: flex;
        justify-content: flex-start;
        .idx{
            width: 8%;
            text-align: center;
            display: flex;
            align-items: center;
            span{
                display: block;
                margin: auto;
            }
        }
        .geImg{
			width: 56px;
			height: 56px;
			overflow: hidden;
			border-radius: 5px;
            display: flex;
            align-items: center;
            img{
                width: 100%;
                // border-radius: 5px;
            }
        }
        .item-text{
            width: 90%;
            margin-left: 8px;
            display: flex;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 6px 0 0;
			>div{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
            p:first-of-type{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
                margin-bottom: 5px;
                span{
                    font-size: 14px;
                }
            }
            
            p:last-of-type{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
                span{
                    font-size: 12px;
                }
            }
        }
    }
    .item-right{
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        i{
            font-size: 28px;
        }
    }
    // 播放器
    audio{
        position: fixed;
        bottom: 0;
        left: 10%;
    }
}
</style>